<template>
  <div style="width:100vw;height:100vh;" class="class-box">
    <!-- 头部 -->
    <!-- <mt-header fixed title="课程详情">
      <div @click="goBack" slot="left">
        <mt-button icon="back"></mt-button>
      </div>
    </mt-header>-->

    <!-- 主体部分 -->
    <div class="bscroll" ref="bscroll">
      <div style="padding-bottom:74px;" class="bscroll-container">
        <div class="class-body">
          <div class="class-banner">
            <div class="banner-card">
              <div class="banner-tip flex-row">
                <div>
                  <p class="banner-tip-text1">{{classDetail.title}}</p>
                  <p class="banner-tip-text2">{{classDetail.smallTitle}}</p>
                </div>
                <div class="banner-picture">
                  <div class="radius-picture">
                    <img src="@/assets/homePicture/xgjt.png" alt="error" />
                  </div>
                </div>
              </div>
              <div class="banner-address flex-row">
                <span>{{classDetail.address}}</span>
                <div
                  @click="show = true"
                  v-show="btn5"
                  style="font-size:18px;width:50px;text-align:right;"
                  class="iconfont iconerweima"
                ></div>
              </div>
              <div class="banner-time">
                <span>{{date}}</span>
                <span>课程时长 {{classDetail.courseTime}} 分钟</span>
              </div>
            </div>
          </div>
          <div class="class-explain">
            <div class="explain-tip">课程说明</div>
          </div>
          <div class="explain-content">
            <p>{{classDetail.introduce}}</p>
          </div>
          <div class="class-explain">
            <div class="explain-tip">是否公开</div>
          </div>
          <div class="explain-content">
            <p>{{classDetail.flag == 1 ? '公开' : '不公开'}}</p>
          </div>
          <div class="class-explain">
            <div class="explain-tip">课程类别</div>
          </div>
          <div class="explain-content">
            <p>{{classDetail.courseDept == 1 ? '公司课程' : '部门课程'}}</p>
          </div>
          <!-- <div class="class-explain">
        <div class="explain-tip">评论区</div>
      </div>
      <div class="comment-box">
        <div class="comment-head flex-row">
          <div class="comment-picture">
            <img src="~@/assets/homePicture/banner1.png" alt />
          </div>
          <div>
            <div class="comment-text1">徐志强</div>
            <div class="comment-text2">Java工程师</div>
            <div class="comment-text3">老师讲解的真的很详细呀！给老师点赞！</div>
          </div>
        </div>
        <div class="comment-fotter">5分钟前</div>
      </div>
      <div class="comment-box">
        <div class="comment-head flex-row">
          <div class="comment-picture">
            <img src="~@/assets/homePicture/banner1.png" alt />
          </div>
          <div>
            <div class="comment-text1">徐志强</div>
            <div class="comment-text2">Java工程师</div>
            <div class="comment-text3">老师讲解的真的很详细呀！给老师点赞！</div>
          </div>
        </div>
        <div class="comment-fotter">5分钟前</div>
          </div>-->
        </div>
      </div>
    </div>
    <div v-if="btn0" class="btn-group flex-row">
      <mt-button @click.native="confirm(1)" type="default" size="normal">驳回</mt-button>
      <mt-button @click.native="confirm(2)" type="primary" size="normal">通过</mt-button>
    </div>
    <div v-if="btn1" class="btn-group flex-row">
      <mt-button @click.native="confirm(3)" type="primary" size="large">提醒审批</mt-button>
    </div>
    <div v-if="btn2" class="btn-group flex-row">
      <mt-button @click.native="confirm(4)" type="primary" size="large">发布课程</mt-button>
    </div>
    <div v-if="btn3" class="btn-group flex-row">
      <mt-button @click.native="confirm(5)" type="primary" size="large">报名</mt-button>
    </div>
    <div v-if="btn5" class="btn-group flex-row">
      <mt-button @click.native="confirm(6)" type="primary" size="large">结课</mt-button>
    </div>
    <!-- <div v-if="btn6" class="btn-group flex-row">
      <mt-button @click.native="confirm(7)" type="primary" size="large">扫码签到</mt-button>
    </div> -->
    <!-- 二维码 -->
    <transition name="bounce">
      <div v-show="show" @click="show = false" class="qr-modal">
        <div class="img-box">
          <img :src="classDetail.qr" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { Indicator, Toast } from "mint-ui";
import { setText } from "../../untils/ddnavigate";
const Easydate = require("../../untils/easydate");
export default {
  data() {
    return {
      show: false,
      classDetail: {},
      btn0: false,
      btn1: false,
      btn2: false,
      btn3: false,
      btn5: false,
      btn6: false
    };
  },
  mounted() {
    /* 
      @statusNum
      0:审批、驳回
      1:提醒审批
      2:发布课程
      3:报名详情
    */
    let { id, statusNum } = this.$route.query;
    let that = this;
    let params = {
      id
    };
    that.$get("qryCourseInfoById", params).then(res => {
      if (res.success) {
        that.classDetail = res.data;
      }
    });
    if (statusNum == 0) {
      that.btn0 = true;
    } else if (statusNum == 1) {
      that.btn1 = true;
    } else if (statusNum == 2) {
      that.btn2 = true;
    } else if (statusNum == 3) {
      that.btn3 = true;
    } else if (statusNum == 4) {
      that.btn0 = false;
      that.btn1 = false;
      that.btn2 = false;
      that.btn3 = false;
      that.btn5 = false;
    } else if (statusNum == 5) {
      that.btn5 = true;
    } else if (statusNum == 6) {
      that.btn6 = true;
    }
    this.initScroll("bscroll");
    // 设置标题文字
    setText("课程详情");
  },
  activated() {},
  computed: {
    date() {
      let dates = this.classDetail.openTime;
      let edate = Easydate(dates);
      return edate.format("yyyy年MM月dd日 tt hh:mm:ss");
    }
  },
  methods: {
    initScroll(dom) {
      this.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        this.aBScroll = new BScroll(bscrollDom, {
          click: true
        });
      });
    },
    confirm(type) {
      let url = "";
      let that = this;
      let classDetail = that.classDetail;
      let params = {
        id: classDetail.id
      };
      if (type == 1) {
        url = "refCourse";
      } else if (type == 2) {
        url = "passCourse";
      } else if (type == 3) {
        url = "remindApproval";
      } else if (type == 5) {
        params = {
          courseId: classDetail.id
        };
        url = "signOneCourse";
      } else if (type == 6) {
        params = {
          courseId: classDetail.id
        };
        url = "overStudy";
        that.$post(url, params).then(res => {
          if (res.success) {
            let toastObj = Toast({
              message: "操作成功",
              iconClass: "mint-toast-icon mintui mintui-success",
              duration: 2000
            });
            setTimeout(() => {
              this.$router.push({path:'/studyCenter'});
            }, 2000);
          }
        });
        return;
      } else if (type == 7) {
        dd.biz.util.scan({
          type: "all", // type 为 all、qrCode、barCode，默认是all。
          onSuccess: function(data) {
            //onSuccess将在扫码成功之后回调
            /* data结构
                { 'text': String}
              */
            that.$http.get(data.text).then(res => {
              Toast({
                message: res.data,
                duration: 2000
              });
            });
          },
          onFail: function(err) {}
        });
        return;
      }
      if (type == 4) {
        that.$router.push({
          path: "/publishClass",
          query: { id: classDetail.id }
        });
        return;
      }
      that.$get(url, params).then(res => {
        if (res.success) {
          let toastObj = Toast({
            message: "操作成功",
            iconClass: "mint-toast-icon mintui mintui-success",
            duration: 2000
          });
          setTimeout(() => {
            this.$router.go(-1);
          }, 2000);
        }
      });
    }
    // goBack(){
    //   this.$router.go(-1);
    // }
  }
};
</script>

<style lang="less" scoped>
@import url("~@/pagecss/class-details.less");
.banner-tip-text1,
.banner-tip-text2 {
  width: 500/75rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.btn-group {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 23/75rem 30/75rem;
  background-color: #ffffff;
}
.btn-group button {
  flex: 1 0 auto;
}
.mint-button--default {
  margin-right: 66/75rem;
}
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.qr-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  .img-box {
    display: inline-block;
    margin-top: 60%;
    width: 400/75rem;
    height: 400/75rem;
  }
}
</style>